<template>
  <div class="list">
    <div class="bg-top">
      <ListTop title="知识空间" :tabs="['四个共同', '民族走廊']" :active="tabActive" @change="ChangeTab" />
      <div class="ui-center bg-box">
        <div class="btn-box ui-flex justify-center">
          <div
            :class="['item', { on: subjectId - 1 === index }]"
            v-for="(item, index) in imgList"
            :key="item.title"
            @click="JumpList(item.subjectId)">
            {{ item.title }}
          </div>
        </div>
        <div class="text" v-html="detail.content"></div>
      </div>
      <div v-if="detail.picture && detail.picture.length" class="ui-center bg-box pic">
        <div class="title"></div>
        <div class="img-box">
          <div class="item" v-for="(item, index) in detail.picture" :key="item.id">
            <UiImgLoading noRadius :src="baseURL + item.coverImg" :title="item.name" @click="ViewImg(index)" width="100%" height="236px" />
            <div class="text">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div v-if="detail.video && detail.video.length" class="ui-center bg-box video">
        <div class="title"></div>
        <div class="img-box">
          <div class="item" v-for="(item, index) in detail.video" :key="item.id">
            <UiImgLoading noRadius :src="baseURL + item.coverImg" width="100%" height="236px" @click="ViewVideo(item.url)" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <UiFooter />
</template>

<script setup>
import { preview } from 'vue3-preview-image';
import ListTop from '@/components/listTop.vue';

const { get, router, baseURL } = inject('global');

let tabActive = ref(1);
const ChangeTab = index => {
  if (index === tabActive.value) return;
  if (!index) {
    router.push('/listSpace?active=0');
  }
};

let imgList = ref([
  {
    title: '藏彝走廊',
    subjectId: 1
  },
  {
    title: '河西走廊',
    subjectId: 2
  },
  {
    title: '南岭走廊',
    subjectId: 3
  }
]);

let detail = reactive({}),
  subjectId = ref(0);
const GetData = () => {
  let id = router.currentRoute.value.query.id;
  subjectId.value = router.currentRoute.value.query.subjectId;
  get('/knowledge/' + id, { id }).then(res => {
    detail = Object.assign(detail, res);
  });
};

const JumpList = subjectId => {
  router.push('/listSpaceList?subjectId=' + subjectId);
};

// 图片预览
const ViewImg = current => {
  let list = detail.picture.map(item => baseURL + item.coverImg);
  preview(current, list);
};

// 视频预览
const ViewVideo = url => {
  window.open(url);
};

onMounted(() => {
  GetData();
});
</script>

<style lang="scss" scoped>
.list {
  background: #ede8e2;
  padding: 0 0 100px 0;
  .bg-top {
    @include bgImg('@/assets/list/top-bg_news.png');
    background-size: auto 417px;
    background-position: 0 250px;
  }
  .bg-box {
    box-sizing: border-box;
    overflow: hidden;
    .btn-box {
      padding: 50px 0;
      .item {
        position: relative;
        margin: 0 20px;
        width: 170px;
        height: 70px;
        font-size: 18px;
        color: #7c715f;
        line-height: 26px;
        padding: 22px 0;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        @include bgImg('@/assets/list/btn-detail.png');
        &.on,
        &:hover {
          color: #9c2c29;
          font-weight: bold;
          @include bgImg('@/assets/list/btn-detail_on.png');
          &::after {
            content: '';
            position: absolute;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            display: block;
            width: 35px;
            height: 9px;
            @include bgImg('@/assets/list/bg-title-arrow.png');
          }
        }
      }
    }
    .text {
      font-size: 16px;
      color: #3d3d3d;
      line-height: 2;
      word-break: break-all;
    }
    .title {
      width: 282.97px;
      height: 134px;
      margin: 40px 0;
    }
    &.pic {
      padding-bottom: 10px;
      .title {
        @include bgImg('@/assets/list/bg-title-pic.png');
      }
    }
    &.video {
      .title {
        @include bgImg('@/assets/list/bg-title-video.png');
      }
    }
    .img-box {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 46px 58px;
      cursor: pointer;
      .item {
        background: #fffdf7;
        border: 1px solid #9c2c29;
        box-sizing: border-box;
        padding: 3px 3px 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
      .text {
        font-size: 18px;
        color: #3d3333;
        line-height: 28.79px;
        text-align: center;
        padding: 16px 0;
      }
    }
  }
}
</style>
